import { PropType } from 'vue';
import { ElTimeline, ElTimelineItem } from 'element-plus';
import './index.scss';
export interface ITimelineItemOption {
  timestamp?: string;
  hideTimestamp?: boolean;
  center?: boolean;
  placement?: 'top' | 'bottom'; // 默认 top
  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
  color?: string;
  size?: string; // normal / large
  hollow?: boolean; // 是否空心点
  icon?: string | JSX.Element;
  vSlots?: {
    default?: () => TAnyFunction<JSX.Element | string>;
    dot?: () => TAnyFunction<JSX.Element | string>;
  };
}
export const MciTimeline = defineComponent({
  name: 'MciTimeline',
  props: {
    list: {
      type: Array as PropType<ITimelineItemOption[]>,
      default: () => []
    },
    isProgress: {
      type: Boolean,
      default: false
    }
  },
  render() {
    const createTimelineItem = () => {
      return this.list.map((item, index) => {
        const { vSlots, hollow } = item;
        const { default: slotDefault, dot: slotDot } = vSlots || {};
        const slots: any = {
          default: slotDefault?.(),
          dot: slotDot?.()
        };
        const itemAttr = {
          ...item,
          hollow: hollow ?? true
        };
        return <MciTimelineItem key={index} {...itemAttr} vSlots={slots} />;
      });
    };
    return (
      <ElTimeline class="mci-timeline" vSlots={this.$slots}>
        {createTimelineItem()}
      </ElTimeline>
    );
  }
});

export const MciTimelineItem = defineComponent({
  name: 'MciTimelineItem',
  props: {
    type: {
      type: String as PropType<'primary' | 'success' | 'warning' | 'danger' | 'info' | ''>,
      default: ''
    },
    hollow: {
      type: Boolean,
      default: true
    }
  },
  render() {
    const className = this.type ? `is-${this.type}` : '';
    return (
      <ElTimelineItem
        class={`mci-timeline-item ${className}`}
        hollow={this.hollow}
        {...this.$attrs}
        vSlots={this.$slots}
      />
    );
  }
});
